<template>
	<div class="mi-canvas-screenfull">
		<Tooltip :content="$t('message.FullScreen')" placement="top">
			<span class="mi-canvas-tools-icon" :style="theme =='dark'?'background-color: #1d2334':''">
				<i class="iconfont icon-full-screen-enter" v-if="!full" @click="screenfullQuitOrIn" :style="theme=='dark'?'color: #fff':''"></i>
				<i class="iconfont icon-full-screen-exit" v-if="full" @click="screenfullQuitOrIn" :style="theme=='dark'?'color: #fff':''"></i>
			</span>
		</Tooltip>
	</div>
</template>

<script lang="ts">
	import {Vue, Component, Prop} from 'vue-property-decorator';
	import screenfull from 'screenfull';
	import {Getter} from 'vuex-class';

	@Component
	export default class ScreenfullComponent extends Vue {
		@Prop() elem: any;
		full = false;
		@Getter('getTheme', {}) theme: any;

		screenfullQuitOrIn(): void {
			if (screenfull.isEnabled) {
				const elem = document.getElementById(this.elem);
				if (elem) {
					this.full = !this.full;
					if (this.full) {
						screenfull.request(document.getElementById(this.elem) as HTMLDivElement);
						screenfull.on('error', (evt) => {
							this.$Message.error({
								content: '全屏失败，请刷新后再试',
								duration: 3
							});
						});
					} else screenfull.exit();
				} else {
					this.$Message.error({
						content: '未获取到要全屏的内容',
						duration: 3
					});
				}
			} else {
				this.$Message.error({
					content: '当前浏览器不支持全屏操作',
					duration: 3
				});
			}
		}
	}
</script>
